<template>
	<view class="makeagent">
		<view class="makestore_bos">
			<view class="edit_box">
				<view class="edit_title">收货人</view>
				<input class="edit_input" :value="obj.name" placeholder="请输入收货人姓名" @input="Onname" maxlength="6"
					placeholder-class="placeholderClass" />
			</view>
			<view class="edit_box">
				<view class="edit_title">联系电话</view>
				<input class="edit_input" :value="obj.phone" @input="Onmobile" placeholder="请输入联系电话" maxlength="11"
					type="number" placeholder-class="placeholderClass" />
			</view>
			<!-- <view class="edit_box">
				<view class="edit_title">默认</view>
				<switch color="#3aaf96" style="transform: scale(.8,.8)" :checked="obj.isdefault==1?true:false"
					@change="Ondefault" />
			</view> -->
			<view class="edit_box">
				<view class="edit_title">收货地址</view>
				<view class="edit_addrr u-line-1" @click="Onmap">
					<!-- Oncityopen -->
					<view v-if="adrrobj.province ==''">
						<text class="placeholder">省</text>
						<text class="placeholder">市</text>
						<text class="placeholder">区</text>
					</view>
					<view wx:else>
						<text class="value">{{adrrobj.province}}</text>
						<text class="value">{{adrrobj.city}}</text>
						<text class="value">{{adrrobj.area}}</text>
					</view>
				</view>
				<view class="edit_addrrbtn u-flex" @click="Onmap">
					<image class="" src="/static/lj/common/location.png"></image>
					<view>定位</view>
				</view>
				
			</view>
			<view class="edit_box">
				<view class="edit_title">详细地址</view>
				<input class="edit_input" :value="obj.detail" @input="Oninfo" placeholder="请输入详细地址" maxlength="200" placeholder-class="placeholderClass" />
			</view>
		</view>
		<!-- 提交 -->
		<view class="btn-fillet" @click="Onarea">提交</view>
			
		<!-- 选择地址弹窗 -->
		<Comcity ref="Comcity"  @Onaddress="Onaddress"></Comcity>
	</view>

</template>

<script>
	import Comcity from '@/components/Comcity.vue'
	export default {
		components: {
			Comcity
		},
		onLoad() {},
		data() {
			return {
				province_list: [],
				city_list: [],
				county_list: [],
				
				id: null, //地址ID
				//提交需求
				obj: {
					name: '',
					phone: '',
					lng: '',
					lat: '',
					province_code: '',
					city_code: '',
					region_code: '420105',
					detail: '',
					isdefault:'0'
				},
				//地址
				adrrobj:{
					province:'',
					city:'',
					area:''
				},
			}
		},
		onLoad(options) {
			var util = require('@/common/js/area.js');
			this.province_list = util.default.areaList.province_list
			this.city_list = util.default.areaList.city_list
			this.county_list = util.default.areaList.county_list
			console.log('province_list', this.province_list)
			console.log('city_list', this.city_list)
			console.log('county_list', this.county_list)
			
			if (options.id) {
				uni.setNavigationBarTitle({
					title: "编辑地址"
				})
				
				this.id = options.id
				this.Onareadetails()
			} else {
				this.id = null
			}
		},
		methods: {
			//详情
			Onareadetails() {
				this.$Http({
					url: 'detailAddress',
					data: {
						id: this.id
					},
				}).then(res => {
					if (res.code == 1) {
						this.obj.name = res.data.name
						this.obj.phone = res.data.phone
						this.obj.lng = res.data.lng
						this.obj.lat = res.data.lat
						this.obj.province_code = res.data.province_code
						this.obj.city_code = res.data.city_code
						this.obj.region_code = res.data.region_code
						this.obj.detail = res.data.detail
						this.obj.isdefault = res.data.isdefault
						
						this.adrrobj.province = res.data.province_name
						this.adrrobj.city = res.data.city_name
						this.adrrobj.area = res.data.region_name
					}
				});
			},
			//姓名
			Onname(e) {
				this.obj.name = e.detail.value
			},
			//手机号码
			Onmobile(e) {
				this.obj.phone = e.detail.value
			},
			//详细地址
			Oninfo(e) {
				this.obj.detail = e.detail.value
			},
			//默认地址
			Ondefault(e) {
				this.obj.isdefault = e.detail.value == true ? 1 : 0
			},
			//打开弹窗
			Oncityopen() {
				this.$refs.Comcity.Onopen(this.obj.region_code)
			},
			//地址确认返回
			Onaddress(e) {
				this.adrrobj.province = e.province.title
				this.adrrobj.city = e.city.title
				this.adrrobj.area = e.county.title
				
				this.obj.province_code	= e.province.code
				this.obj.city_code = e.city.code
				this.obj.region_code = e.county.code
			},
			Onmap(){
				var that = this;
			
				// var res = {
				// 	address: "广东省深圳市龙华区龙华民治民乐新村",
				// 	errMsg: "chooseLocation:ok",
				// 	latitude: 22.593379,
				// 	longitude: 114.055481,
				// 	name: "丰泽湖山庄",
				// }
				// // that.obj.address = res.address
				// that.obj.lng = res.longitude;
				// that.obj.lat = res.latitude;
				
				// var reg = /.+?(省|市|自治区|自治州|县|区)/g
				// var addressTxts = res.address.match(reg)
				// console.log(res.address + ': ', addressTxts)
				// this.adrrobj.province = addressTxts[0]
				// this.adrrobj.city = (addressTxts.length>1)?addressTxts[1]:''
				// this.adrrobj.area = (addressTxts.length>2)?addressTxts[2]:''
				
				// this.obj.province_code = ''
				// this.obj.city_code = ''
				// this.obj.region_code = ''
				// if(this.adrrobj.province){
				// 	for(var i in this.province_list){
				// 		if(this.province_list[i] == this.adrrobj.province){
				// 			this.obj.province_code = i
				// 			break;
				// 		}
				// 	}
				// }
				// if(this.adrrobj.city){
				// 	for(var i in this.city_list){
				// 		if(this.city_list[i] == this.adrrobj.city){
				// 			this.obj.city_code = i
				// 			break;
				// 		}
				// 	}
				// }
				// if(this.adrrobj.area){
				// 	for(var i in this.county_list){
				// 		if(this.county_list[i] == this.adrrobj.area){
				// 			this.obj.region_code = i
				// 			break;
				// 		}
				// 	}
				// }
				// if(!this.obj.detail) this.obj.detail = res.name
				// return false
			
				uni.chooseLocation({
					geocode: true,
					success: function(res) {
						if(!res.address) return
						console.log(res)
						that.obj.address = res.address
						that.obj.lng = res.longitude;
						that.obj.lat = res.latitude;
						
						var reg = /.+?(省|市|自治区|自治州|县|区)/g
						var addressTxts = res.address.match(reg)
						console.log(res.address + ': ', addressTxts)
						that.adrrobj.province = addressTxts[0]
						that.adrrobj.city = (addressTxts.length>1)?addressTxts[1]:''
						that.adrrobj.area = (addressTxts.length>2)?addressTxts[2]:''
						
						that.obj.province_code = ''
						that.obj.city_code = ''
						that.obj.region_code = ''
						if(that.adrrobj.province){
							for(var i in that.province_list){
								if(that.province_list[i] == that.adrrobj.province){
									that.obj.province_code = i
									break;
								}
							}
						}
						if(that.adrrobj.city){
							for(var i in that.city_list){
								if(that.city_list[i] == that.adrrobj.city){
									that.obj.city_code = i
									break;
								}
							}
						}
						if(that.adrrobj.area){
							for(var i in that.county_list){
								if(that.county_list[i] == that.adrrobj.area){
									that.obj.region_code = i
									break;
								}
							}
						}
						if(!that.obj.detail) that.obj.detail = res.name
					}
				});
			},
			//提交
			Onarea() {
				if (this.obj.name == '') {
					wx.showToast({
						title: '姓名不能为空',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.obj.phone == '') {
					wx.showToast({
						title: '电话号码不能为空',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.obj.province_code == '') {
					wx.showToast({
						title: '地址不能为空',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.obj.detail == '') {
					wx.showToast({
						title: '请输入详情地址',
						icon: 'none',
						duration: 2000
					})
					return
				}
				let url = ''
				if(this.id){
					url = 'editAddress'
					this.obj.address_id = this.id
				}else{
					url = 'addAddress'
				}
				this.$Http({
					url: url,
					data: this.obj,
					show: true,
					type: 'POST'
				}).then(res => {
					if (res.code == 1) {
						uni.$emit('type',1)
						// 关闭当前页面
						uni.navigateBack({
							delta: 1
						});
					}
				});
			}
		}
	}
</script>

<style lang="less">
	@import url("style.less");
	page{
		background-color: #f6f6f6;
	}
	.makeagent{
		padding-top: 0;
		padding-bottom: 22rpx;
		.makestore_bos{
			width: 100%;
			box-shadow: none;
			border-radius: 0;
			margin: 0;
			padding: 0;
			
			.edit_box{
				width: 100%;
				padding: 0 60rpx;
				padding-right: 40rpx;
				&:last-child{
					border: none;
				}
			}
			
			.edit_title{
				color: #999999;
				width: 180rpx;
				min-width: 180rpx;
				height: 90rpx;
				line-height: 90rpx;
			}
			.edit_input{
				font-size: 24rpx;
				height: 90rpx;
				line-height: 90rpx;
			}
			.edit_addrr{
				flex: 1;
				height: 90rpx;
				line-height: 90rpx;
				font-size: 24rpx;
				.placeholder,.value{
					margin-right: 20rpx;
				}
			}
			.edit_addrrbtn{
				font-size: 28rpx;
				color: #12b3f1;
				min-width: 120rpx;
				
				image{
					display: block;
					width: 44rpx;
					min-width: 44rpx;
					height: 44rpx;
				}
			}
		}
	
	}
	
	.btn-fillet{
		width: 300rpx;
		height: 74rpx;
		line-height: 74rpx;
		text-align: center;
		color: #fff;
		border-radius: 10rpx;
		background-color: #12b3f1;
		box-shadow: 0 6rpx 6rpx #ace0f3;
		margin: 100rpx auto 0;
	}
</style>
